import {useEffect, useState} from 'react'
import {productDiscount} from '@/api'
import dis from './index.module.scss'
import styled from '@/pages/product/index.module.scss'
import {ProductList} from '@/type/product'
import config from '@/static/config'
import Base64 from '@/utils/base64'
import {useNavigate} from 'react-router-dom'
const Dis = () => {
  const navigate = useNavigate()
  const [list, setList] = useState<ProductList[]>([])
  useEffect(() => {
    productDiscount().then(res => {
      setList(res.data)
    })
  }, [])


  const onClick = (item: ProductList) => {
    const base:Base64 = new Base64()
    const str = `product_id=${item.product_id}`
    navigate(`/home/productinfo/${base.encode(str)}`, {
      replace: true
    })
  }

  return (
    <div className={dis.main}>
      <div className={styled.box}>
        {
          list.map((item) => (
            <div key={item.id} className={styled.box_list} onClick={() => onClick(item)}>
              <img width={180} height={200} src={config.productImgUrl + item.product_pic} alt=""/>
              <div className={styled.box_list_name}>{item.product_name}</div>
              <div className={styled.box_list_info}>
                <span>&yen;{item.discount}</span>
                <span>{item.product_order}人付款</span>
                <span>{item.product_address}</span>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  )
}


export default Dis
